<template>
  <!-- 导入 -->
  <el-dialog title="导入数据" v-model="editVisible" width="30%" draggable>
    <div class="import-upload" v-loading="loading">
      <UploadResourcesInfo v-model:disabledbtn="disabledbtn" v-model:loading="loading" resourceKey="file_url" v-model:form="form" :acceptList="['.xls', '.xlsx', '.csv']" suggestInfo="请上传xls文件" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="disabledbtn" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import UploadResourcesInfo from "@/components/common/UploadResourcesInfo.vue";
import { useState } from "@/hooks/useState.ts";
import type { IImportFile } from "@/types/recoveryManage/recycledGoodsInfo";
import { importRecycleGoodsInfo } from "@/utils/api/recycleGoods";
import { IMG_URL } from "@/utils/config";
const { disabledbtn, loading, toggleState } = useState();
const emit = defineEmits<{
  handleSuccess: [];
}>();
const editVisible = defineModel<boolean>("editVisible", { required: true });
const form = reactive<IImportFile>({
  file_url: ""
});
/* 数据校验 */
function submitForm() {
  submitFormInfo();
}
/* 保存或编辑信息 */
function submitFormInfo() {
  if (!form.file_url) {
    ElMessage.error("请上传文件");
    return;
  }
  toggleState(true);
  importRecycleGoodsInfo<unknown, IImportFile>({
    file_url: IMG_URL + form.file_url
  })
    .then(res => {
      ElMessage.success(res.msg);
      editVisible.value = false;
      form.file_url = "";
      emit("handleSuccess");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
</script>

<style lang="scss" scoped>
.upload-demo {
  text-align: center;
}

:deep(.el-upload.is-drag) {
  margin: auto;
}
</style>
